#corpo {width:750px; margin:0 auto;}
#jogo tr td {vertical-align: middle; text-align: center;font-size:18px;}
tr {margin:10px 0;}
tr.horizontal {height:10px}
tr.vertical {height:50px}

tr.horizontal td.horizontal {width:50px;}
tr.horizontal td.vertical {width:10px;}

tr.horizontal td.horizontal.traco, tr.vertical td.horizontal.traco ,tr.horizontal td.horizontal.traco:hover, tr.vertical td.horizontal.traco:hover{
	background-image: linear-gradient(bottom, rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -o-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
}

tr.vertical td.vertical.traco, tr.horizontal td.vertical.traco, tr.vertical td.vertical.traco:hover, tr.horizontal td.vertical.traco:hover{
	background-image: linear-gradient(left , rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -o-linear-gradient(left , rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -moz-linear-gradient(left , rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -webkit-linear-gradient(left , rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
	background-image: -ms-linear-gradient(left , rgb(255,255,255) 25%, rgb(0,0,0) 40%, rgb(0,0,0) 50%, rgb(0,0,0) 60%, rgb(255,255,255) 75%);
}

tr.horizontal td.horizontal:hover, tr.vertical td.horizontal:hover{
	background-image: linear-gradient(bottom, rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -o-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
}

tr.vertical td.vertical:hover, tr.horizontal td.vertical:hover{
	background-image: linear-gradient(left , rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -o-linear-gradient(left , rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -moz-linear-gradient(left , rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -webkit-linear-gradient(left , rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
	background-image: -ms-linear-gradient(left , rgb(255,255,255) 25%, rgb(180,180,180) 40%, rgb(180,180,180) 50%, rgb(180,180,180) 60%, rgb(255,255,255) 75%);
}

tr.horizontal td.horizontal.box:hover, tr.vertical td.horizontal.box:hover, tr.vertical td.vertical.box:hover, tr.horizontal td.vertical.box:hover {background:none;}
tr.horizontal td.horizontal.box.jogador1:hover, tr.vertical td.horizontal.box.jogador1:hover, tr.vertical td.vertical.box.jogador1:hover, tr.horizontal td.vertical.box.jogador1:hover {background:red;}
tr.horizontal td.horizontal.box.jogador2:hover, tr.vertical td.horizontal.box.jogador2:hover, tr.vertical td.vertical.box.jogador2:hover, tr.horizontal td.vertical.box.jogador2:hover {background:blue;}


tr.vertical td.vertical {height:50px;padding:0 5px;}
tr.vertical td.horizontal {height:10px;}
td.box{border-radius:5px;}
td.jogador1 {background:red;}
td.jogador2 {background:blue;}

td.traco, td.ponto {background-color: black;}
td.traco {}
td.ponto, #jogo td.ponto:hover {background: #000000; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #000000 64%, #ffffff 83%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(64%,#000000), color-stop(83%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 64%,#ffffff 83%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 64%,#ffffff 83%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 64%,#ffffff 83%); /* IE10+ */
background: radial-gradient(ellipse at center, #000000 64%,#ffffff 83%); /* W3C */}
